<template>
  <div class="w">
    <div id="content">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>注册</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <el-form ref="signupFormRef" :rules="signupFormRules" :model="signupForm" label-width="0px">
          <el-form-item prop="username">
            <span>用户名 :</span>
            <el-input v-model="signupForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <span>密码 :</span>
            <el-input v-model="signupForm.password"></el-input>
          </el-form-item>
          <el-form-item prop="password2">
            <span>确认密码 :</span>
            <el-input v-model="signupForm.password2"></el-input>
          </el-form-item>
          <el-form-item prop="email">
            <span>邮箱 :</span>
            <el-input v-model="signupForm.email"></el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary" plain>注册</el-button>
            <el-button type="primary">通过GitHub登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <!-- 右侧区域 -->
    <div id="sidebar">
      <!-- 关于 -->
      <div class="panel">
        <div class="header">
          <span class="col_fade">关于</span>
        </div>
        <div class="inner">
          <p>CNode：Node.js专业中文社区</p>
          <p>在这里你可以：</p>
          <ul>
            <li>向别人提出你遇到的问题</li>
            <li>帮助遇到问题的人</li>
            <li>分享自己的知识</li>
            <li>和其它人一起进步</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      signupForm: {
        username: 'admin',
        password: '123456',
        password2: '',
        email: ''
      },
      signupFormRules: {
        username: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          {
            min: 5,
            max: 15,
            message: '长度在 5 到 15 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-form {
  width: 500px;
  margin: 20px auto;
  span {
    display: inline-block;
    width: 80px;
    text-align: right;
    margin-right: 20px;
  }
}
.el-input {
  display: inline-block;
  width: 60%;
}
.btns {
  display: flex;
  justify-content: center;
}
</style>
